<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <!-- <el-col :span="4">
                      <div class="block">
                        <el-date-picker
                        v-model="queryParam.searchParams[2].value"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="4">
                      <div class="block">
                        <el-date-picker
                        v-model="queryParam.searchParams[2].value1"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                        </el-date-picker>
                    </div>
                </el-col> -->
                <el-col :span="3">
                    <el-select v-model="queryParam.searchParams[1].value" @change="getOrderList()" placeholder="请选择状态">
                    <el-option
                    v-for="item in orderStatus"
                    :key="item.selectValue"
                    :label="item.selectLabel"
                    :value="item.selectValue">
                    </el-option>
                    </el-select> 
                </el-col>
                <el-col :span="10">
                    <div>
                    <el-input clearable placeholder="请输入订单号(扫客户订单的二维码)" @keyup.enter.native="getOrderList" 
                    v-model="queryParam.searchParams[0].value">
                        <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
                    </el-input>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
        <el-table
                :data="this.OrderList"
                stripe
                style="width: 100%">
                <el-table-column type="expand" label="">
                    <template slot-scope="scope">
                        <el-table :data="scope.row.orderDetailDTOList" style="width: 100%">
                            <el-table-column type="index" label="日期" width="180"></el-table-column>
                            <el-table-column prop="scheduleDate" label="日期" width="180"></el-table-column>
                            <el-table-column prop="courtName" label="球场名称" width="180"></el-table-column>
                            <el-table-column prop="startTime" label="开始时间"> </el-table-column>
                            <el-table-column prop="endTime" label="结束时间"> </el-table-column>
                            <el-table-column prop="price" label="金额"> </el-table-column>
                        </el-table>    
                    </template>
                </el-table-column>
                <el-table-column type="index"       label="#"></el-table-column>
                <el-table-column prop="id"           label="订单ID"> </el-table-column>
                <el-table-column prop="userNickname" label="微信名"> </el-table-column>
                <el-table-column prop="userName"     label="姓名"> </el-table-column>
                <el-table-column prop="userMobile"   label="联系电话"> </el-table-column>
                <el-table-column prop="totalPrice"   label="订单总金额">  </el-table-column>
                <el-table-column prop="orderStatus"  label="支付状态">
                    <template slot-scope="scope">
                        <el-tag v-if ="scope.row.orderStatus == '0'" type=""  effect="dark">待支付</el-tag>
                        <el-tag v-if ="scope.row.orderStatus == '1'" type="success" effect="dark">已支付</el-tag>
                        <el-tag v-if ="scope.row.orderStatus == '2'" type="info"    effect="dark">已取消</el-tag>  
                        <el-tag v-if ="scope.row.orderStatus == '3'" type="danger" effect="dark">退款中</el-tag>
                        <el-tag v-if ="scope.row.orderStatus == '4'" type="warning" effect="dark">已退款</el-tag>   
                    </template>
                </el-table-column>
                <el-table-column prop="orderCreateDate" label="下单时间"> </el-table-column>
                <el-table-column label="操作">
                        <template slot-scope="scope">
                        <el-tooltip effect="dark" content="点击退款" placement="top" :enterable="false">
                            <el-button type="danger"  icon="el-icon-sold-out" size="big" @click="Refund(scope.row)">退款</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.number"
                :page-sizes="[1, 2, 3, 5,10]"
                :page-size="queryParam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.userForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return{
            orderStatus:[
                {
                selectValue: '',
                selectLabel: '全部'
                },{
                selectValue: '0',
                selectLabel: '待付款'
                }, {
                selectValue: '1',
                selectLabel: '已付款'
                }, {
                selectValue: '2',
                selectLabel: '已取消'
                }, {
                selectValue: '3',
                selectLabel: '退款中'
                },{
                selectValue: '4',
                selectLabel: '已退款'
                }
            ],
            selectValue:'9',
            OrderList:[],
            dialogVisible: false,
            dialogEditVisible: false,
            userForm:{
                username:"",
                password:"",
                ComPassword:"",
                mobile:"",
                email:"",
            },
            userInfo:{
              userid:"",
              username:"",
              email:"",
              mobile:""  
            },
            userFormrules:{
                username:[{required:true,message:'请输入用户名',
                            trigger:'blur'},
                            {min:3,max:10,message:'用户名的长度需在3到10个字符之间',
                            trigger:'blur'}],
                password:[{required:true,message:'请输入密码',
                            trigger:'blur'},
                            {min:3,max:10,message:'密码的长度需在3到10个字符之间',
                            trigger:'blur'}],
                ComPassword:[{required:true,message:'请再次输入密码',
                            trigger:'blur'},
                            {validator:validatePass2,
                            trigger:'blur'}],
                mobile:[{required:'true',len:11,message:'请输入正确的手机号码',trigger:'blur'}],
                email:[{required:'true',message:'请输入正确的邮箱号码',trigger:'blur'}],
            },
            userInfoFormrules:{
                mobile:[{required:'true',len:11,message:'请输入正确的手机号码',trigger:'blur'}],
                email:[{required:'true',message:'请输入正确的邮箱号码',trigger:'blur'}], 
            },
            total:0, 
            sizes:1, 
            prev:true, 
            pager:10, 
            next:true, 
            jumper:true,
            queryParam:{
                "direction": "",
                "fastSearch": "",
                "field": "",
                "number": 1,
                "searchParams": [
                    {
                        "fieldName": "id",
                        "operator": "eq",
                        "value": "",
                        "value1": {}
                    },
                    {
                        "fieldName": "orderStatus",
                        "operator": "eq",
                        "value": "",
                        "value1": {}
                    },
                ],
                "size": 10
            },
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
        };
    },
    created(){
        this.getOrderList()
    },
    methods:{
        getOrderList(){
            this.$axios.post(
                'order/list',this.queryParam,
                {
                    headers:{
                        'Authorization': window.sessionStorage.getItem('token')
                    }
                }
            )
            .then(res=>{
                console.log('请求成功',res.data)
                this.total = res.data.data.totalElements;
                this.pager = res.data.data.totalPages;  
                this.size =  res.data.data.size;
                this.prev =  res.data.data.hasPrevious;
                this.next =  res.data.data.hasNext;
                this.OrderList = res.data.data.data;
            })
            .catch(Error=>{
                console.log('请求失败1',Error)
            })
        },    
        handleSizeChange(val){
            console.log(val)
            this.queryParam.size = val
            this.getOrderList()
        },
        handleCurrentChange(val){
            this.queryParam.number=val
            this.getOrderList()
        },
        async updateOrderStatus(userinfo){
            //console.log(userinfo)
            const{data:res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
            if(res.meta.status !== 200){
                userinfo.mg_state  != userinfo.mg_state;
                return this.$message.error('确认订单失败!')
            }
            else{
                return this.$message.success('确认订单成功!')
            }
        },
        //清空表单
        ReSetDialog(){
            this.$refs.userFormruleForm.resetFields()
        },
        DialogEditClose(){
            this.$refs.userInfoFormruleForm.resetFields();
        },
        Refund(val){
            console.log('退款失败!',val)
            this.$axios.post(
                'order/wx/refund',
                {
                    "orderId":val.id,
                    "refundMoney":val.totalPrice
                },
                {
                    headers:{
                        'Authorization': window.sessionStorage.getItem('token')
                    }
                }
            )
            .then(res=>{
                console.log('退款请求成功',res)
                if(res.data.code == 200){
                    return this.$message.success('订单退款成功!')
                }else
                {
                   return this.$message.error(res.data.message) 
                }
            })
            .catch(Error=>{
                console.log('退款失败',Error)
                return this.$message.error('订单退款失败!')
            })
        }
    },
}
</script>

<style lang="less" scoped>
  .el-breadcrumb{
      margin-bottom: 10px;
      font-size: 14px;
  }
  .el-table-column{
      text-align: center;
  }
  .el-pagination{
      text-align: left;
  }
  .el-form-item{
      margin-right: 50px;
  }

  .title{
      text-align: center;
      margin-top: 6px;
  }
</style>